<template>
	<view class="page">
		<!-- 状态栏 -->
		<view class="status_bar">
			<view class="status_top">
				<view class="status_Icon">
					<view class="quiet">
						
					</view>
					<view class="move">
						
					</view>
				</view>
				<view class="status_text">
					待检查
				</view>
			</view>
			<view class="note">
				您已完成预约。请按照预约时间及时到院签到
			</view>
		</view>
		<!-- 预约码 -->
		<view class="Appointment_code">
			<image class="bar_code" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%BC%B4%E8%B4%B9%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u1321.png" mode="widthFix"></image>
			<view class="num_code">
				20200101001598Z
			</view>
			<view class="note">
				检查签到时可出示此码
			</view>
		</view>
		<!-- 患者信息 -->
		<view class="patient_info">
			<view class="title">
				患者信息
			</view>
			<view class="list_info">
				<view class="list-item">
					<view class="item_name">
						预约医院
					</view>
					<view class="item_content">
						四川省保健院北苑
					</view>
				</view>
				<view class="list-item">
					<view class="item_name">
						就诊患者
					</view>
					<view class="item_content">
						{{listinfo.patient}}
					</view>
				</view>
				<view class="list-item">
					<view class="item_name">
						登记号
					</view>
					<view class="item_content">
						20200101001598Z
					</view>
				</view>
			</view>
		</view>
		<!-- 预约信息 -->
		<view class="reservation_info">
			<view class="title">
				预约信息
			</view>
			<view class="list_info">
				<view class="list-item">
					<view class="item_name">
						预约项目
					</view>
					<view class="item_content">
						{{listinfo.test_item}}
					</view>
				</view>
				<view class="list-item">
					<view class="item_name">
						检查诊室
					</view>
					<view class="item_content">
						{{listinfo.consult}}
					</view>
				</view>
				<view class="list-item">
					<view class="item_name">
						检查地点
					</view>
					<view class="item_content">
						门诊二楼放射科
					</view>
				</view>
				<view class="list-item">
					<view class="item_name">
						预约时间
					</view>
					<view class="item_content" style="font-weight: 700;">
						{{listinfo.register_time}}
					</view>
				</view>
				<view class="list-item">
					<view class="item_name">
						预约单号
					</view>
					<view class="item_content">
						202001010653
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../src/utils/api.js'
	import { ref } from 'vue'
	const listinfo = ref({})
	onLoad((option)=>{
		console.log(option)
		api('/pendingappointmentlist',{
			id:option.register_id
		}).then(res=>{
			console.log(res.dataes[0])
			listinfo.value = res.dataes[0]
		}).catch(err=>{
			console.log(err)
		})
	})
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f2f2f2;
		min-height: 100vh;
		padding-bottom: 60rpx;
		box-sizing: border-box;
		// 状态栏
		.status_bar{
			width: 100%;
			height: 224rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 38rpx 40rpx;
			box-sizing: border-box;
			.status_top{
				height: 70rpx;
				display: flex;
				align-items: center;
				.status_Icon{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					border: 4rpx solid rgba(24, 144, 255, 1);
					box-sizing: border-box;
					position: relative;
					.quiet{
						width: 4rpx;
						height: 22rpx;
						border-radius: 60rpx;
						background-color: rgba(24, 144, 255, 1);
						position: absolute;
						bottom: 50%;
						left: 49%;
					}
					.move{
						position: absolute;
						bottom: 50%;
						left: 49%;
						width: 4rpx;
						height: 22rpx;
						border-radius: 60rpx;
						background-color: rgba(24, 144, 255, 1);
						transform-origin: bottom;
						transition: transform 0.01s; /* 为了平滑过渡，但动画本身由keyframes控制 */
						animation: rotate 5s linear infinite; /* 12小时制，时针每小时移动30度 */
					}
					@keyframes rotate {
						0%{
							transform: rotate(90deg);
						}
						100%{
							transform: rotate(810deg);
						}
					}
				}
				.status_text{
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-weight: 700;
					color: #1677FF;
					font-size: 36rpx;
					margin-left: 30rpx;
				}
			}
			.note{
				font-family: 'Microsoft YaHei UI', sans-serif;
				color: #7F7F7F;
				font-size: 28rpx;
				margin-top: 28rpx;
			}
		}
		// 预约码
		.Appointment_code{
			width: 100%;
			height: 330rpx;
			background-color: #fff;
			padding: 30rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			margin-top: 30rpx;
			.bar_code{
				width: 600rpx;
			}
			.num_code{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				font-weight: 700;
				margin: 18rpx 0;
			}
			.note{
				font-family: 'ArialMT', 'Arial', sans-serif;
				color: 'ArialMT', 'Arial', sans-serif;
				font-size: 26rpx;
				color: #7f7f7f;
			}
		}
		// 患者信息
		.patient_info{
			width: 100%;
			height: 298rpx;
			background-color: #fff;
			margin-top: 30rpx;
			padding: 36rpx 40rpx;
			box-sizing: border-box;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				font-weight: 700;
			}
			.list_info{
				margin-top: 26rpx;
				.list-item{
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #000;
					margin-bottom: 16rpx;
					.item_name{
						color: #AAAAAA;
					}
				}
			}
		}
		// 预约信息
		.reservation_info{
			width: 100%;
			height: 412rpx;
			background-color: #fff;
			margin-top: 30rpx;
			padding: 36rpx 40rpx;
			box-sizing: border-box;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				font-weight: 700;
			}
			.list_info{
				margin-top: 26rpx;
				.list-item{
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #000;
					margin-bottom: 16rpx;
					.item_name{
						color: #AAAAAA;
					}
				}
			}
		}
	}       
</style>
